<template name="cannedResponses">
	{{#requiresPermission 'view-canned-responses'}}
		{{#if isDetailScreen}}
			{{#with cannedResponse}}
				<ul class="canned-response-list">
					{{#if isExistingResponse}}
						<li>
							<div class="canned-response-form-wrapper">
								<div class="canned-response-creator-data">
									<div class="canned-response-label">Created by</div>
									<div class="canned-response-created-by canned-response-info">{{createdByString}}</div>
								</div>

								{{#if canDeleteResponse}}
									<div class="canned-response-delete-button">
										{{> icon block="rc-header__icon" icon="trash"}}
										<a href="#" class="delete-canned-response" data-id="{{_id}}" >{{_ "Delete"}}</a>
									</div>
								{{/if}}
							</div>
						</li>
					{{/if}}

					<li>
						<div class="canned-response-form-wrapper">
							{{#if canModifyResponse}}
								<fieldset>
									<input type="hidden" name="id" value={{_id}}>
									<div class="rc-input">
										<label class="rc-input__label">
											<div class="rc-input__title">{{_ "Shortcut"}}</div>
											<div class="rc-input__wrapper">
												<div class="rc-input__icon canned-response-shortcut-prefix">!</div>
												<input class="rc-input__element" type="text" name="shortcut" autocomplete="off" value="{{shortcut}}">
											</div>
										</label>
									</div>
									<div class="rc-input">
										<label class="rc-input__label">
											<div class="rc-input__title">{{_ "Text"}}</div>
											<div class="rc-input__wrapper">
												<textarea class="rc-input__element" name="text" rows="8" style="height: auto">{{text}}</textarea>
											</div>
										</label>
									</div>

									<div class="rc-button__group">
										<button class='rc-button rc-button--primary save-canned-response-btn'><span>{{_ "Save"}}</span></button>
										<button class='rc-button rc-button--secondary cancel-canned-response-btn'><span>{{_ "Cancel"}}</span></button>
									</div>
								</fieldset>
							{{else}}
								<div>
									<div class="canned-response-shortcut-preview">! {{shortcut}}</div>
									<div class="canned-response-text-preview">{{text}}</div>
								</div>
							{{/if}}
						</div>
					</li>
				</ul>
			{{/with}}

			{{#if isUserContext}}
				<div class="rc-button__group canned-response-buttons">
					{{#if isExistingResponse}}
						<a href="#" class="rc-button rc-button--primary use-canned-response-btn">{{_ "Use_this_response"}}</a>
						{{#if isPreviewMode}}
							<button class='rc-button rc-button--secondary cancel-canned-response-btn'><span>{{_ "Cancel"}}</span></button>
						{{/if}}
					{{/if}}
				</div>
			{{/if}}
		{{else}}

			{{#if hasNoCannedResponses}}
				<h2 class="thread-empty">{{_ "No_Canned_Responses"}}</h2>
			{{else}}
				<div class="canned-response-list-wrapper">
					<ul class="canned-response-list">

						<li class="canned-response-search-item">
							<div class="canned-response-wrapper">
									<div class="rc-input__wrapper">
										<div class="rc-input__icon">
											{{> icon block="rc-input__icon-svg" icon="magnifier" }}
										</div>
										<input type="text" class="rc-input__element js-search" name="response-search" id="response-search" placeholder="{{_ "Search"}}" autocomplete="off" value="{{searchText}}">
									</div>
							</div>
						</li>
				
					{{#each cannedResponses}}
						<li data-id="{{_id}}" class="canned-response">
							<div class="canned-response-wrapper">
								<div class="canned-response-shortcut">{{shortcut}}</div>
								<div class="canned-response-text">{{text}}</div>
								<div class="canned-response-scope">{{scope}}</div>
							</div>
						</li>
					{{/each}}

					</ul>
				</div>
			{{/if}}

			<div class="rc-button__group canned-response-buttons">
				<a href="#" class="rc-button rc-button--primary new-canned-response-btn">{{_ "New_Canned_Response"}}</a>
			</div>
		{{/if}}

	{{/requiresPermission}}
</template>
